<template>
  <view class="address-page">
    <!-- 地址列表 -->
    <view class="address-list" v-if="addressList.length > 0">
      <view 
        v-for="(address, index) in addressList" 
        :key="address.addressId"
        class="address-item"
      >
        <view class="address-content">
          <view class="address-header">
            <text class="contact-name">{{ address.contactName }}</text>
            <text class="contact-phone">{{ address.contactPhone }}</text>
            <view v-if="address.isDefault === 1" class="default-tag">默认</view>
          </view>
          
          <view class="address-detail">
            <text class="address-text">
              {{ address.province }}{{ address.city }}{{ address.district }}{{ address.street }}{{ address.building }}
            </text>
          </view>
        </view>
        
        <view class="address-actions">
          <button class="action-btn edit-btn" @tap="editAddress(address)">
            <uni-icons type="compose" size="16" color="#00C853"></uni-icons>
            <text>编辑</text>
          </button>
          <button class="action-btn delete-btn" @tap="deleteAddressItem(address)">
            <uni-icons type="trash" size="16" color="#ff3b30"></uni-icons>
            <text>删除</text>
          </button>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view v-else class="empty-state">
      <uni-icons type="location" size="80" color="#ccc"></uni-icons>
      <text class="empty-text">暂无收货地址</text>
    </view>
    
    <!-- 添加地址按钮 -->
    <view class="add-address-container">
      <button class="add-address-button" @tap="addNewAddress">
        <uni-icons type="plus" size="20" color="#fff"></uni-icons>
        <text class="button-text">新增地址</text>
      </button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useUserStore } from '@/store/modules/user';
import { getUserAddresses, deleteAddress as deleteAddressApi } from '@/api/auth';

const userStore = useUserStore();

// 地址数据接口
interface AddressItem {
  addressId: string;
  customerId: string;
  contactName: string;
  contactPhone: string;
  province: string;
  city: string;
  district: string;
  street: string;
  building: string;
  latitude: number;
  longitude: number;
  isDefault: number;
  createdAt: string;
  updatedAt: string;
}

// 地址列表数据
const addressList = ref<AddressItem[]>([]);

// 加载地址列表
const loadAddresses = async () => {
  if (!userStore.userInfo?.customerId) {
    uni.showToast({
      title: '请先登录',
      icon: 'none'
    });
    return;
  }

  try {
    uni.showLoading({ title: '加载中...' });
    const data = await getUserAddresses(userStore.userInfo.customerId);
    
    console.log('地址列表返回:', data);
    
    // 后端返回的是数组,直接使用
    if (Array.isArray(data)) {
      addressList.value = data;
    } else {
      addressList.value = [];
    }
  } catch (error) {
    console.error('获取地址列表失败:', error);
    uni.showToast({
      title: '获取地址列表失败',
      icon: 'none'
    });
  } finally {
    uni.hideLoading();
  }
};

// 添加新地址
const addNewAddress = () => {
  uni.navigateTo({
    url: '/pages/my/address/addAddress/addAddress'
  });
};

// 编辑地址
const editAddress = (address: AddressItem) => {
  uni.navigateTo({
    url: `/pages/my/address/editAddress?addressId=${address.addressId}`
  });
};

// 删除地址
const deleteAddressItem = (address: AddressItem) => {
  uni.showModal({
    title: '提示',
    content: '确定要删除这个地址吗?',
    success: async (res) => {
      if (res.confirm && userStore.userInfo?.customerId) {
        try {
          await deleteAddressApi(userStore.userInfo.customerId, Number(address.addressId));
          uni.showToast({
            title: '删除成功',
            icon: 'success'
          });
          // 重新加载列表
          loadAddresses();
        } catch (error) {
          console.error('删除地址失败:', error);
        }
      }
    }
  });
};

// 页面加载时获取地址列表
onMounted(() => {
  loadAddresses();
});
</script>

<style scoped>
.address-page {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 120rpx;
}

.address-list {
  padding: 20rpx;
}

.address-item {
  background-color: #ffffff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.address-content {
  margin-bottom: 20rpx;
}

.address-header {
  display: flex;
  align-items: center;
  margin-bottom: 15rpx;
}

.contact-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-right: 20rpx;
}

.contact-phone {
  font-size: 28rpx;
  color: #666;
  flex: 1;
}

.default-tag {
  background-color: #00C853;
  color: #fff;
  padding: 4rpx 12rpx;
  border-radius: 8rpx;
  font-size: 20rpx;
}

.address-detail {
  margin-top: 10rpx;
}

.address-text {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
}

.address-actions {
  display: flex;
  gap: 20rpx;
  border-top: 1rpx solid #f0f0f0;
  padding-top: 20rpx;
}

.action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60rpx;
  border-radius: 30rpx;
  font-size: 24rpx;
  gap: 8rpx;
  border: none;
  padding: 0;
}

.edit-btn {
  background-color: #f0f9f0;
  color: #00C853;
}

.delete-btn {
  background-color: #fff5f5;
  color: #ff3b30;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 200rpx 0;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
  margin-top: 20rpx;
}

.add-address-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx 30rpx;
  background-color: #fff;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.add-address-button {
  width: 100%;
  height: 88rpx;
  background-color: #00C853;
  color: #fff;
  border-radius: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10rpx;
  font-size: 32rpx;
  border: none;
}

.button-text {
  font-size: 32rpx;
}
</style>